<template>

  <div class="login">
    <div class="login-form">
      <p>车牌管理系统</p>
      <el-tabs v-model="activeName" stretch>
        <el-tab-pane label="登录" name="login">
          <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
            <el-form-item label="" prop="username">
              <el-input
                v-model="loginForm.username"
                type="text"
                autocomplete="off"
                prefix-icon="el-icon-user-solid"
                placeholder="请输入用户名"
                clearable
              />
            </el-form-item>
            <el-form-item label="" prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"
                autocomplete="off"
                prefix-icon="el-icon-lock"
                placeholder="请输入密码"
                show-password
              />
            </el-form-item>
            <el-form-item class="btns">
              <el-button type="primary" @click="handleLogin()">登录</el-button>
              <el-button @click="resetLoginForm()">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="注册" name="register">
          <register />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import register from '@/views/register'

export default {
  name: 'Login',
  components: { register },
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          {
            require: true,
            trigger: 'blur',
            message: '请输入账号'
          }
        ],
        password: [
          {
            require: true,
            trigger: 'blur',
            message: '请输入密码'
          }
        ]
      },
      loading: false,
      redirect: undefined,
      otherQuery: {},
      activeName: 'login' // 默认显示登录页面
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },

  methods: {
    checkCapslock(e) {
      const { key } = e
      this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    },
    resetLoginForm() {
      this.$refs['loginForm'].resetFields()
    }

  }
}
</script>

<style scoped>
.login {
  width: 100%;
  height: 100vh;
  background-image: url("../../assets/login/login.jpg");
  background-size: 100% 100%;
  background-position: center center;
  overflow: auto;
  position: relative;
}
.login .login-form {
  width: 360px;
  height: 450px;
  position: absolute;
  left: 70%;
  top: 45%;
  margin-left: -200px;
  margin-top: -150px;
  padding: 10px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px #ddd;
}
.login p {
  font-size: 24px;
  text-align: center;
  font-weight: 600;
}
.login .btns {
  display: flex;
  justify-content: flex-end;
}
</style>
